Add Charts to Our JavaScript App with Anychart — Range Spline Area, Range Step Area, and Scatter Bubble Charts

Anychart is an easy to use library that lets us add chart into our JavaScript web app.

In this article, we’ll look at how to create basic charts with Anychart.

Range Spline Area Chart

We can add a range spline area chart easily with Anychart.

For instance, we can write the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

Then we can add the following JavaScript code:

const data = [
  ["January", 0.7, 6.1],
  ["February", 0.6, 6.3],
  ["March", 1.9, 8.5],
  ["April", 3.1, 10.8],
  ["May", 5.7, 14.4]
];

const chart = anychart.area();
const series = chart.rangeSplineArea(data);
chart.container("container");
chart.draw();

We add the script tag to add the Anychart base package.

The div lets us add the container element in which we render the chart in.

Then we define the data array with arrays that has the x-axis value, low y-axis value and high y-axis value in this order.

anychart.area lets us create the area chart.

Then chart.rangeSplineArea method to set the data for the range spline chart.

chart.container sets the ID of the container element to render the chart in.

chart.draw draws the chart.

Range Step Area Chart

We can add a range step area chart with Anychart.

For instance, we can write:

const data = [{
    x: "1995",
    low: 0.10,
    high: 0.15
  },
  {
    x: "1996",
    low: 0.10,
    high: 0.15
  },
  {
    x: "1997",
    low: 0.12,
    high: 0.17
  },
  {
    x: "1998",
    low: 0.13,
    high: 0.20
  },
  {
    x: "1999",
    low: 0.15,
    high: 0.20
  },
];

const chart = anychart.area();
const series = chart.rangeStepArea(data);
series.stepDirection("forward");
chart.container("container");
chart.draw();

We create the data array with he x property to add the x-axis value.

low has the low y-axis value.

And high has the high y-axis value.

anychart.area creates the area chart.

change.rangeStepArea creates the range step area chart with the data as the data for the chart.

series.stepDirection sets the step direction.

And the rest of the code is the same as the previous example.

Scatter Bubble Chart

We can create a scatter bubble chart with the chart.bubble method.

For instance, we can write:

const data = [{
    x: 1.3,
    value: 39,
    size: 7
  },
  {
    x: 2.5,
    value: 42,
    size: 24
  },
  {
    x: 3.2,
    value: 54,
    size: 39
  },
  {
    x: 3.9,
    value: 38,
    size: 18
  },
  {
    x: 5.1,
    value: 58,
    size: 2
  }
];

const chart = anychart.scatter();
const series = chart.bubble(data);
chart.container("container");
chart.draw();

We have the data array with objects with the x , value and size properties.

x has the x-axis value.

value jas the y-axis value.

size has the radius of the bubble.

anychart.scatter creates the scatter chart.

chart.bubble lets us add the bubbles.

And the rest of the code is the same as the previous examples.

Conclusion

We can create a range spline area chart, range step area chart, and scatter bubble chart with Anychart.